<template>
    <div>
        <el-tree
                ref="tree"
                :data="tableData"
                node-key="menuId"
                icon-class="el-icon-plus"
                draggable
                :allow-drag="allowDrag"
                :allow-drop="allowDrop"
                @node-click="nodeClick"
                @node-drop="nodeDrop"
                @node-contextmenu="handleContextMenu"
                :props="defaultProps">
        </el-tree>
    </div>
</template>

<script>
import {getMenu}from '@/api/loginAPI'
import {updateMenu}from '@/api/menuApi'
export default {
    props: {
        params: {
            type: Object,
            default () {
                return {}
            }
        }
    },
    data(){
        return {
            tableData: [],
            defaultProps: {
                children: 'children',
                label: 'cnName'
            },
            form:{
                roleId:'',
                nodeCheck:[]
            },
            checked:[]
        }
    },
    methods:{
        nodeClick (data,node){
            console.log(data,111)
            console.log(node,222)
        },
        // 处理右键菜单事件
        handleContextMenu(evt, nodeData) {
            evt.preventDefault()
            const menu = new ContextMenu({
                list: [
                    { label: 'Add Child', callback: () => this.addChild(nodeData) }
                ]
            })
            menu.show(evt.clientX, evt.clientY)
        },
        // 添加子节点
        addChild(parentNode) {
            parentNode.children.push({ label: this.newNodeLabel, children: [] })
            this.newNodeLabel = ''
        },
        nodeDrop (node, finNode, type, e) {
           if(type=='inner'){
                let data={
                    menuId: node.data.menuId,
                    upperId: finNode.data.menuId
                }
                updateMenu(data).then(res=>{
                    this.$message.success("调整成功")
                }).catch(e=>{
                    this.$message.error("调整失败")
                })
           }else if(type =='prev'){
               let data={
                   menuId: node.data.menuId,
                   upperId: finNode.data.upperId
               }
               updateMenu(data).then(res=>{
                   this.$message.success("调整成功")
               }).catch(e=>{
                   this.$message.error("调整失败")
               })
           }else{
               let data={
                   menuId: node.data.menuId,
                   upperId: finNode.data.upperId
               }
               updateMenu(data).then(res=>{
                   this.$message.success("调整成功")
               }).catch(e=>{
                   this.$message.error("调整失败")
               })
           }
        },
        allowDrag (node) {
           return node.data.upperId!=='0'
        },
        allowDrop(nodeIn, node, type){
            if(node.level==1){
                return type=='inner'
            }else{
                return true
            }
        }
    },
    mounted() {
        getMenu({allFlag:'helloworld'}).then(res=>{
            this.tableData=res.data.data
            console.log(this.tableData,1111111)
            if(this.tableData.length>0){
                this.tableData.forEach(it=>{
                    if(it.path=='/index'){
                        it.disabled=true
                    }
                })
            }
        }).catch(e => {
            this.$message.error({
                message: '抱歉，读取菜单信息遇到异常，请重试或联系管理员处理'
            })
        })
    }
}
</script>

<style scoped>
</style>
